<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Main Page</title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/dining.css}" />

</head>
<body>

<!-- 头部 -->
<header th:replace="common/top"></header>

<!-- 显示登录用户的 firstname -->
<!--
<div id="Welcome">
    <div id="WelcomeContent">
        <h3>Welcome! <span th:text="${loginAccount != null ? loginAccount.username : ''}"></span></h3>
    </div>
</div>
-->

<div id="Main">
    <div id="Sidebar">
        <div id="SidebarContent">
            <a href="/catalog/viewCategory?categoryId=MAIN">
                <img th:src="@{/images/main_cam_bigger.PNG}" class="sideImg" id="sideImg1"/>
            </a>
            <div class="hidden"><span class="words" id="words1">Come and choose now!</span></div>
            <br/>
            <img th:src="@{/images/third_din.PNG}" />
            <img th:src="@{/images/fifth_din.PNG}" />
            <br/>

            <a href="/catalog/viewCategory?categoryId=SOUTH">
                <img th:src="@{/images/south_cam_bigger.PNG}" class="sideImg" id="sideImg2"/>
            </a>
            <div class="hidden"><span class="words" id="words2">Come and choose now!</span></div>
            <br/>
            <img th:src="@{/images/second_din.PNG}" />
            <br/>

            <a href="/catalog/viewCategory?categoryId=NEW">
                <img th:src="@{/images/new_cam_bigger.PNG}" class="sideImg" id="sideImg3"/>
            </a>
            <div class="hidden"><span class="words" id="words3">Come and choose now!</span></div>
            <br/>
            <img th:src="@{/images/new_din.PNG}" />
            <br/>
        </div>
    </div>

    <div id="MainImage">
        <div id="MainImageContent">
            <div id="NewImg">
                <a href="/catalog/viewCategory?categoryId=NEW">
                    <img th:src="@{/images/new_cam_main.PNG}" align="middle" width="150px" height="40px"
                         class="new" id="newIcon" />
                </a>
            </div>

            <div id="SouthImg">
                <a href="/catalog/viewCategory?categoryId=SOUTH">
                    <img th:src="@{/images/south_cam_main.PNG}" align="middle" width="150px" height="40px"
                         class="south" id="southIcon" />
                </a>
            </div>

            <div id="MainImg">
                <a href="/catalog/viewCategory?categoryId=MAIN">
                    <img th:src="@{/images/main_cam_main.PNG}" align="middle" width="150px" height="40px"
                         class="main" id="mainIcon" />
                </a>
            </div>

            <img th:src="@{/images/background.png}" align="middle" width="360" height="355"/>
        </div>
    </div>

    <div id="Separator">&nbsp;</div>

    <!-- 商品悬浮窗 -->
    <div id="productInfo">123</div>

</div>

<!-- 底部 -->
<footer th:replace="common/bottom"></footer>
<script type="text/javascript" th:src="@{/static/js/move.js}"></script>
</body>
</html>